<template>
  <div class="bigShow">
    <div class="head">
      数据可视化
      <h1 id="t" class="time">
        <span></span>年<span></span>月<span></span>日<span></span>时<span
        ></span>分<span></span>秒
      </h1>
      <Viewphoto></Viewphoto>
    </div>
  </div>
</template>
<script>
import Viewphoto from "../../menu/viewpic/viewphoto.vue"
export default {
  components:{Viewphoto},
  data() {
    return {
      timeshow: [],
    };
  },
  mounted() {
    this.timeshow = document.getElementById("t").getElementsByTagName("span");
    setInterval(this.changetime, 1000);
  },
  methods: {
    changetime() {
      var time = new Date();
      this.timeshow[0].innerHTML = time.getFullYear();
      this.timeshow[1].innerHTML = time.getMonth() + 1;
      this.timeshow[2].innerHTML = time.getDate();
      this.timeshow[3].innerHTML = time.getHours();
      this.timeshow[4].innerHTML = time.getMinutes();
      this.timeshow[5].innerHTML = time.getSeconds();
    },
  },
};
</script>
<style lang="less" scoped>
.bigShow {
  width: 100%;
  height: 95%;
  margin: 0 auto;
  background: linear-gradient(#0f0c29, #302b63, #24243e);
  color: aqua;
  font-weight: 600;
  .head {
    width: 100%;
    height: 80px;
    background: linear-gradient(#2c3e50, #bdc3c7);
    text-align: center;
    line-height: 80px;
    font-size: 2vmin;
  }
  .time {
    display: inline-block;
    position: absolute;
    right: 50px;
    top: 60px;
  }
}
</style>